<template>
  <dv-border-box-8 class="quality-panel">
    <div class="panel-header">
      <i class="el-icon-s-check"></i>
      产品质量指标
    </div>
    
    <div class="quality-content">
      <div class="quality-summary">
        <div class="quality-rate">
          <dv-percent-pond 
            class="pond-chart"
            :config="pondConfig" 
          />
          <div class="rate-label">合格率</div>
        </div>
        
        <div class="quality-stats">
          <div class="stat-row">
            <div class="stat-label">已检验</div>
            <div class="stat-value">{{ qualityData.inspected }}</div>
          </div>
          <div class="stat-row">
            <div class="stat-label">合格品</div>
            <div class="stat-value green">{{ qualityData.qualified }}</div>
          </div>
          <div class="stat-row">
            <div class="stat-label">不合格</div>
            <div class="stat-value red">{{ qualityData.defective }}</div>
          </div>
        </div>
      </div>
      
      <div class="defect-container">
        <div class="defect-header">缺陷类型分布</div>
        <div ref="defectChart" class="defect-chart"></div>
      </div>
    </div>
  </dv-border-box-8>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  qualityData: {
    type: Object,
    required: true
  }
})

const defectChart = ref(null)
let chartInstance = null

// 计算百分比池塘配置
const pondConfig = computed(() => {
  return {
    value: props.qualityData.qualityRate,
    colors: ['#67c23a', 'rgba(103, 194, 58, 0.2)'],
    borderWidth: 3,
    borderRadius: 5,
    borderGap: 5,
    localGradient: true
  }
})

// 初始化图表
const initChart = () => {
  if (!defectChart.value) return
  
  chartInstance = echarts.init(defectChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        center: ['50%', '50%'],
        data: props.qualityData.defectCategories,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#001529',
          borderWidth: 2
        },
        label: {
          color: '#fff',
          formatter: '{b}: {c}'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    color: ['#f56c6c', '#e6a23c', '#409eff', '#909399']
  }
  
  chartInstance.setOption(option)
}

// 更新图表数据
const updateChart = () => {
  if (!chartInstance) return
  
  chartInstance.setOption({
    series: [
      {
        data: props.qualityData.defectCategories
      }
    ]
  })
}

// 监听窗口大小变化
const handleResize = () => {
  chartInstance && chartInstance.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chartInstance && chartInstance.dispose()
})

// 监听数据变化
watch(() => props.qualityData, () => {
  updateChart()
}, { deep: true })
</script>

<style scoped>
.quality-panel {
  width: 100%;
  height: 350px;
  position: relative;
  padding: 15px;
}

.panel-header {
  font-size: 16px;
  color: #29b6ff;
  margin-bottom: 15px;
}

.quality-content {
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.quality-summary {
  display: flex;
  margin-bottom: 15px;
  height: 40%;
}

.quality-rate {
  width: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pond-chart {
  width: 120px;
  height: 120px;
}

.rate-label {
  font-size: 14px;
  color: #b9e0ff;
  margin-top: 5px;
}

.quality-stats {
  flex: 1;
  padding: 10px 0 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: rgba(0, 33, 65, 0.3);
  border-radius: 4px;
}

.stat-label {
  font-size: 14px;
  color: #b9e0ff;
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.stat-value.green { color: #67c23a; }
.stat-value.red { color: #f56c6c; }

.defect-container {
  flex: 1;
  position: relative;
}

.defect-header {
  font-size: 14px;
  color: #b9e0ff;
  margin-bottom: 10px;
}

.defect-chart {
  width: 100%;
  height: calc(100% - 25px);
}
</style> 